import React, { useState } from "react";
import { TabBar } from "antd-mobile";
import Icon from "../Icon";
import styles from "./style.less";
import { useNavigate, useLocation } from "umi";
export default () => {
  const navigate = useNavigate();
  const location = useLocation();
  const tabs = [
    {
      key: "/home",
      title: (active: boolean) => (
        <span style={{ color: active ? "#ff623a" : "#333" }}>首页</span>
      ),
      icon: (active: boolean) => (
        <Icon name="shouye1" size={22} color={active ? "#ff623a" : "#333"} />
      ),
    },
    {
      key: "/cate",
      title: (active: boolean) => (
        <span style={{ color: active ? "#ff623a" : "#333" }}>分类</span>
      ),
      icon: (active: boolean) => (
        <Icon name="fenlei" size={22} color={active ? "#ff623a" : "#333"} />
      ),
    },
    {
      key: "/cart",
      title: (active: boolean) => (
        <span style={{ color: active ? "#ff623a" : "#333" }}>购物车</span>
      ),
      icon: (active: boolean) => (
        <Icon name="gouwuche" size={22} color={active ? "#ff623a" : "#333"} />
      ),
      badge: "99+",
    },
    {
      key: "/user",
      title: (active: boolean) => (
        <span style={{ color: active ? "#ff623a" : "#333" }}>我的</span>
      ),
      icon: (active: boolean) => (
        <Icon name="wode" size={22} color={active ? "#ff623a" : "#333"} />
      ),
    },
  ];
  return (
    <>
      <TabBar
        className={styles.tabbar}
        onChange={(key: string) => {
          navigate(key);
        }}
        activeKey={location.pathname}
      >
        {tabs.map((item) => (
          <TabBar.Item
            key={item.key}
            icon={item.icon}
            title={item.title}
            badge={item.badge}
          />
        ))}
      </TabBar>
    </>
  );
};
